Helper per Iteratori Asincroni JavaScript: Scan - Elaborazione Accumulativa Asincrona

La programmazione asincrona è una pietra miliare dello sviluppo JavaScript moderno, specialmente quando si ha a che fare con operazioni legate all'I/O, come richieste di rete o interazioni con il file system. Gli iteratori asincroni, introdotti in ES2018, forniscono un potente meccanismo per la gestione di flussi di dati asincroni. L'helper `scan`, spesso presente in librerie come RxJS e sempre più disponibile come utility autonoma, sblocca un potenziale ancora maggiore per l'elaborazione di questi flussi di dati asincroni.

Comprendere gli Iteratori Asincroni

Prima di approfondire `scan`, ricapitoliamo cosa sono gli iteratori asincroni. Un iteratore asincrono è un oggetto conforme al protocollo degli iteratori asincroni. Questo protocollo definisce un metodo `next()` che restituisce una promise che si risolve in un oggetto con due proprietà: `value` (il valore successivo nella sequenza) e `done` (un booleano che indica se l'iteratore ha terminato). Gli iteratori asincroni sono particolarmente utili quando si lavora con dati che arrivano nel tempo o che richiedono operazioni asincrone per essere recuperati.

Ecco un esempio di base di un iteratore asincrono:

            
async function* generateNumbers() {
  yield 1;
  yield 2;
  yield 3;
}

async function main() {
  const iterator = generateNumbers();

  let result = await iterator.next();
  console.log(result); // { value: 1, done: false }

  result = await iterator.next();
  console.log(result); // { value: 2, done: false }

  result = await iterator.next();
  console.log(result); // { value: 3, done: false }

  result = await iterator.next();
  console.log(result); // { value: undefined, done: true }
}

main();

            

              
                Copy
              
            
          

Introduzione all'helper `scan`

L'helper `scan` (noto anche come `accumulate` o `reduce`) trasforma un iteratore asincrono applicando una funzione accumulatore a ogni valore ed emettendo il risultato accumulato. Questo è analogo al metodo `reduce` sugli array, ma opera in modo asincrono e su iteratori.

In sostanza, `scan` accetta un iteratore asincrono, una funzione accumulatore e un valore iniziale opzionale. Per ogni valore emesso dall'iteratore sorgente, la funzione accumulatore viene chiamata con il valore accumulato precedente (o il valore iniziale se è la prima iterazione) e il valore corrente dall'iteratore. Il risultato della funzione accumulatore diventa il nuovo valore accumulato, che viene quindi emesso dall'iteratore asincrono risultante.

Sintassi e Parametri

La sintassi generale per l'utilizzo di `scan` è la seguente:

            
async function* scan(sourceIterator, accumulator, initialValue) {
  let accumulatedValue = initialValue;
  for await (const value of sourceIterator) {
    accumulatedValue = accumulator(accumulatedValue, value);
    yield accumulatedValue;
  }
}

            

              
                Copy
              
            
          

• `sourceIterator`: L'iteratore asincrono da trasformare.
• `accumulator`: Una funzione che accetta due argomenti: il valore accumulato precedente e il valore corrente dall'iteratore. Dovrebbe restituire il nuovo valore accumulato.
• `initialValue` (opzionale): Il valore iniziale per l'accumulatore. Se non fornito, il primo valore dall'iteratore sorgente verrà utilizzato come valore iniziale e la funzione accumulatore verrà chiamata a partire dal secondo valore.

Casi d'Uso ed Esempi

L'helper `scan` è incredibilmente versatile e può essere utilizzato in una vasta gamma di scenari che coinvolgono flussi di dati asincroni. Ecco alcuni esempi:

1. Calcolo di un Totale Progressivo

Immagina di avere un iteratore asincrono che emette importi di transazioni. Puoi usare `scan` per calcolare un totale progressivo di queste transazioni.

            
async function* generateTransactions() {
  yield 10;
  yield 20;
  yield 30;
}

async function main() {
  const transactions = generateTransactions();
  const runningTotals = scan(transactions, (acc, value) => acc + value, 0);

  for await (const total of runningTotals) {
    console.log(total); // Output: 10, 30, 60
  }
}

main();

            

              
                Copy
              
            
          

In questo esempio, la funzione `accumulator` aggiunge semplicemente l'importo della transazione corrente al totale precedente. L'`initialValue` di 0 assicura che il totale progressivo parta da zero.

2. Accumulare Dati in un Array

Puoi usare `scan` per accumulare dati da un iteratore asincrono in un array. Questo può essere utile per raccogliere dati nel tempo ed elaborarli in batch.

            
async function* fetchData() {
  yield { id: 1, name: 'Alice' };
  yield { id: 2, name: 'Bob' };
  yield { id: 3, name: 'Charlie' };
}

async function main() {
  const dataStream = fetchData();
  const accumulatedData = scan(dataStream, (acc, value) => [...acc, value], []);

  for await (const data of accumulatedData) {
    console.log(data); // Output: [{id: 1, name: 'Alice'}], [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}], [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}, {id: 3, name: 'Charlie'}]
  }
}

main();

            

              
                Copy
              
            
          

Qui, la funzione `accumulator` utilizza l'operatore spread (`...`) per creare un nuovo array contenente tutti gli elementi precedenti e il valore corrente. L'`initialValue` è un array vuoto.

3. Implementare un Limitatore di Velocità (Rate Limiter)

Un caso d'uso più complesso è l'implementazione di un limitatore di velocità. Puoi usare `scan` per tracciare il numero di richieste effettuate entro un certo intervallo di tempo e ritardare le richieste successive se il limite di velocità viene superato.

            
async function* generateRequests() {
  // Simulate incoming requests
  yield Date.now();
  await new Promise(resolve => setTimeout(resolve, 200));
  yield Date.now();
  await new Promise(resolve => setTimeout(resolve, 100));
  yield Date.now();
}

async function main() {
  const requests = generateRequests();
  const rateLimitWindow = 1000; // 1 second
  const maxRequestsPerWindow = 2;

  async function* rateLimitedRequests(source, window, maxRequests) {
    let queue = [];
    for await (const requestTime of source) {
      queue.push(requestTime);
      queue = queue.filter(t => requestTime - t < window);

      if (queue.length > maxRequests) {
        const earliestRequest = queue[0];
        const delay = window - (requestTime - earliestRequest);
        console.log(`Rate limit exceeded. Delaying for ${delay}ms`);
        await new Promise(resolve => setTimeout(resolve, delay));
      }
      yield requestTime;
    }
  }

  const limited = rateLimitedRequests(requests, rateLimitWindow, maxRequestsPerWindow);

  for await (const requestTime of limited) {
    console.log(`Request processed at ${requestTime}`);
  }
}

main();

            

              
                Copy
              
            
          

Questo esempio utilizza `scan` internamente (nella funzione `rateLimitedRequests`) per mantenere una coda di timestamp delle richieste. Controlla se il numero di richieste all'interno della finestra del limite di velocità supera il massimo consentito. Se lo fa, calcola il ritardo necessario e attende prima di restituire la richiesta.

4. Costruire un Aggregatore di Dati in Tempo Reale (Esempio Globale)

Considera un'applicazione finanziaria globale che deve aggregare in tempo reale i prezzi delle azioni da varie borse. Un iteratore asincrono potrebbe trasmettere aggiornamenti di prezzo da borse come la New York Stock Exchange (NYSE), la London Stock Exchange (LSE) e la Tokyo Stock Exchange (TSE). `scan` può essere utilizzato per mantenere una media mobile o il prezzo massimo/minimo per una particolare azione su tutte le borse.

            
// Simulate streaming stock prices from different exchanges
async function* generateStockPrices() {
  yield { exchange: 'NYSE', symbol: 'AAPL', price: 170.50 };
  yield { exchange: 'LSE', symbol: 'AAPL', price: 170.75 };
  await new Promise(resolve => setTimeout(resolve, 50));
  yield { exchange: 'TSE', symbol: 'AAPL', price: 170.60 };
}

async function main() {
  const stockPrices = generateStockPrices();

  // Use scan to calculate a running average price
  const runningAverages = scan(
    stockPrices,
    (acc, priceUpdate) => {
      const { total, count } = acc;
      return { total: total + priceUpdate.price, count: count + 1 };
    },
    { total: 0, count: 0 }
  );

  for await (const averageData of runningAverages) {
    const averagePrice = averageData.total / averageData.count;
    console.log(`Running average price: ${averagePrice.toFixed(2)}`);
  }
}

main();

            

              
                Copy
              
            
          

In questo esempio, la funzione `accumulator` calcola il totale progressivo dei prezzi e il numero di aggiornamenti ricevuti. Il prezzo medio finale viene quindi calcolato da questi valori accumulati. Ciò fornisce una visione in tempo reale del prezzo dell'azione sui diversi mercati globali.

5. Analizzare il Traffico di un Sito Web a Livello Globale

Immagina una piattaforma globale di analisi web che riceve flussi di dati sulle visite ai siti web da server situati in tutto il mondo. Ogni punto dati rappresenta un utente che visita il sito. Usando `scan`, possiamo analizzare in tempo reale l'andamento delle visualizzazioni di pagina per paese. Supponiamo che i dati abbiano questo aspetto: `{ country: "US", page: "homepage", timestamp: 1678886400 }`.

            
async function* generateWebsiteVisits() {
  yield { country: 'US', page: 'homepage', timestamp: Date.now() };
  yield { country: 'CA', page: 'product', timestamp: Date.now() };
  yield { country: 'UK', page: 'blog', timestamp: Date.now() };
  yield { country: 'US', page: 'product', timestamp: Date.now() };
}

async function main() {
  const visitStream = generateWebsiteVisits();

  const pageViewCounts = scan(
    visitStream,
    (acc, visit) => {
      const { country } = visit;
      const newAcc = { ...acc };
      newAcc[country] = (newAcc[country] || 0) + 1;
      return newAcc;
    },
    {}
  );

  for await (const counts of pageViewCounts) {
    console.log('Page view counts by country:', counts);
  }
}

main();

            

              
                Copy
              
            
          

Qui, la funzione `accumulator` aggiorna un contatore per ogni paese. L'output mostrerebbe i conteggi accumulati delle visualizzazioni di pagina per ogni paese man mano che arrivano nuovi dati di visita.

Vantaggi dell'Utilizzo di `scan`

L'helper `scan` offre diversi vantaggi quando si lavora con flussi di dati asincroni:

• Stile Dichiarativo: `scan` ti permette di esprimere la logica di elaborazione accumulativa in modo dichiarativo e conciso, migliorando la leggibilità e la manutenibilità del codice.
• Gestione Asincrona: Gestisce senza problemi le operazioni asincrone all'interno della funzione accumulatore, rendendolo adatto a scenari complessi che coinvolgono attività legate all'I/O.
• Elaborazione in Tempo Reale: `scan` consente l'elaborazione in tempo reale dei flussi di dati, permettendoti di reagire ai cambiamenti man mano che si verificano.
• Componibilità: Può essere facilmente composto con altri helper per iteratori asincroni per creare pipeline complesse di elaborazione dati.

Implementare `scan` (se non è disponibile)

Mentre alcune librerie forniscono un helper `scan` integrato, puoi facilmente implementarne uno tuo se necessario. Ecco una semplice implementazione:

            
async function* scan(sourceIterator, accumulator, initialValue) {
  let accumulatedValue = initialValue;
  let first = true;
  for await (const value of sourceIterator) {
    if (first && initialValue === undefined) {
      accumulatedValue = value;
      first = false;
    } else {
      accumulatedValue = accumulator(accumulatedValue, value);
    }
    yield accumulatedValue;
  }
}

            

              
                Copy
              
            
          

Questa implementazione itera sull'iteratore sorgente e applica la funzione accumulatore a ogni valore, restituendo il risultato accumulato. Gestisce il caso in cui non venga fornito alcun `initialValue` utilizzando il primo valore dall'iteratore sorgente come valore iniziale.

Confronto con `reduce`

È importante distinguere `scan` da `reduce`. Sebbene entrambi operino su iteratori e utilizzino una funzione accumulatore, differiscono nel loro comportamento e output.

• `scan` emette il valore accumulato per ogni iterazione, fornendo una cronologia progressiva dell'accumulazione.
• `reduce` emette solo il valore accumulato finale dopo aver elaborato tutti gli elementi nell'iteratore.

Pertanto, `scan` è adatto per scenari in cui è necessario tenere traccia degli stati intermedi dell'accumulazione, mentre `reduce` è appropriato quando si necessita solo del risultato finale.

Gestione degli Errori

Quando si lavora con iteratori asincroni e `scan`, è fondamentale gestire gli errori in modo appropriato. Gli errori possono verificarsi durante il processo di iterazione o all'interno della funzione accumulatore. È possibile utilizzare i blocchi `try...catch` per catturare e gestire questi errori.

            
async function* generatePotentiallyFailingData() {
  yield 1;
  yield 2;
  throw new Error('Something went wrong!');
  yield 3;
}

async function main() {
  const dataStream = generatePotentiallyFailingData();

  try {
    const accumulatedData = scan(dataStream, (acc, value) => acc + value, 0);

    for await (const data of accumulatedData) {
      console.log(data);
    }
  } catch (error) {
    console.error('An error occurred:', error);
  }
}

main();

            

              
                Copy
              
            
          

In questo esempio, il blocco `try...catch` cattura l'errore lanciato dall'iteratore `generatePotentiallyFailingData`. È quindi possibile gestire l'errore in modo appropriato, ad esempio registrandolo o ritentando l'operazione.

Conclusione

L'helper `scan` è un potente strumento per eseguire elaborazioni accumulative asincrone su iteratori asincroni JavaScript. Ti consente di esprimere trasformazioni di dati complesse in modo dichiarativo e conciso, gestire le operazioni asincrone in modo appropriato ed elaborare flussi di dati in tempo reale. Comprendendone le funzionalità e i casi d'uso, puoi sfruttare `scan` per creare applicazioni asincrone più robuste ed efficienti. Che tu stia calcolando totali progressivi, accumulando dati in array, implementando limitatori di velocità o costruendo aggregatori di dati in tempo reale, `scan` può semplificare il tuo codice e migliorarne le prestazioni complessive. Ricorda di considerare la gestione degli errori e di scegliere `scan` invece di `reduce` quando hai bisogno di accedere ai valori accumulati intermedi durante l'elaborazione dei tuoi flussi di dati asincroni. Esplorare librerie come RxJS può migliorare ulteriormente la tua comprensione e l'applicazione pratica di `scan` all'interno dei paradigmi di programmazione reattiva.